<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>菜单管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 确保适当的绘制和触屏缩放 -->
    <link rel="stylesheet" href="{$url_css}bootstrap.min.css" type="text/css">

    <script type="text/javascript" src="{$url_js}jquery-1.12.0.min.js"></script>
</head>
<body>
    <div class="container" style="width:96%">
        <h3>新增菜单</h3>
        <table class="table table-striped table-bordered" align="center">
            <tbody>
                <tr>
                    <td>名称</td>
                    <td>KEY</td>
                    <td>URL</td>
                    <td>菜单位置</td>
                    <td>排序</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td class="col-xs-2"><input type="text" id="menu_name" class="form-control" placeholder="菜单名称"></td>
                    <td class="col-xs-2"><input type="text" id="menu_key" class="form-control" placeholder="菜单KEY"></td>
                    <td class="col-xs-2"><input type="text" id="menu_url" class="form-control" placeholder="URL"></td>
                    <td class="col-xs-4">
                        <div class="col-xs-6">
                            <select class="form-control col-xs-2" onchange="changeMenu(this);">
                                {$onemenu}
                            </select>
                        </div>
                        <div class="col-xs-6">
                            <select id="menu_parent" class="form-control col-xs-2 menu_parent">
                                <option value="0">主菜单</option>
                            </select>
                        </div>
                    </td>
                    <td class="col-xs-1"><input type="text" id="menu_order" class="form-control" placeholder="排序"></td>
                    <td class="col-xs-2"><button class="btn btn-primary" id="add_menu">保存</button></td>
                </tr>
            </tbody>
        </table>

        <h3>菜单列表</h3>
        <table class="table table-bordered" align="center" id="list">
            <tbody>
                <tr>
                    <td></td>
                    <td colspan="3">名称</td>
                    <td>KEY</td>
                    <td>URL</td>
                    <td>菜单位置</td>
                    <td>排序</td>
                    <td>操作</td>
                </tr>
                <!-- 一级菜单 -->
                {foreach $menu as $v}
                    <tr class="">
                        <td style="width:50px"><button class="btn btn-info toggle-list" mid="{$v.AdminMenuId}">+</button></td>
                        <td class="col-xs-2" colspan="3"><input type="text" class="form-control menu_name" placeholder="菜单名称" value="{$v.Name}"></td>
                        <td class="col-xs-2"><input type="text" class="form-control menu_key" placeholder="菜单KEY"  value="{$v.Key}"></td>
                        <td class="col-xs-2"><input type="text" class="form-control menu_url" placeholder="URL"  value="{$v.Url}"></td>
                        <td class="col-xs-4">
                            <div class="col-xs-6">
                                <select class="form-control col-xs-2" onchange="changeMenu(this);">
                                    {$onemenu}
                                </select>
                            </div>
                            <div class="col-xs-6">
                                <select class="form-control col-xs-2 menu_parent">
                                    <option value="0">主菜单</option>
                                </select>
                            </div>
                        </td>
                        <td class="col-xs-1"><input type="text" class="form-control menu_order" placeholder="排序"  value="{$v.DisplayOrder}"></td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group" aria-label="..." style="width:100px">
                                <button class="btn btn-default update_menu" mid="{$v.AdminMenuId}">保存</button>
                                <a class="btn btn-danger delete" href="?do=delmenu&id={$v.AdminMenuId}">删除</a>
                            </div>
                        </td>
                        <input type="hidden" class="menu_one" value="0">
                        <input type="hidden" class="menu_two" value="0">
                    </tr>
                    <!-- 二级菜单 -->
                    {foreach $v.child as $v2}
                        <tr class="warning list_group_{$v.AdminMenuId}" style="display:none">
                            <td style="width:50px"></td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            <td class="col-xs-2" colspan="2"><input type="text" class="form-control menu_name" placeholder="菜单名称" value="{$v2.Name}"></td>
                            <td class="col-xs-2"><input type="text" class="form-control menu_key" placeholder="菜单KEY"  value="{$v2.Key}"></td>
                            <td class="col-xs-2"><input type="text" class="form-control menu_url" placeholder="URL"  value="{$v2.Url}"></td>
                            <td class="col-xs-4">
                                <div class="col-xs-6">
                                    <select class="form-control col-xs-2" onchange="changeMenu(this);">
                                        {$onemenu}
                                    </select>
                                </div>
                                <div class="col-xs-6">
                                    <select class="form-control col-xs-2 menu_parent">
                                        <option value="0">主菜单</option>
                                    </select>
                                </div>
                            </td>
                            <td class="col-xs-1"><input type="text" class="form-control menu_order" placeholder="排序"  value="{$v2.DisplayOrder}"></td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group" aria-label="..." style="width:100px">
                                    <button class="btn btn-default update_menu" mid="{$v2.AdminMenuId}">保存</button>
                                    <a class="btn btn-danger delete" href="?do=delmenu&id={$v2.AdminMenuId}">删除</a>
                                </div>
                            </td>
                            <input type="hidden" class="menu_one" value="{$v2.ParentId}">
                            <input type="hidden" class="menu_two" value="{$v2.ParentId}">
                        </tr>
                        <!-- 三级菜单 -->
                        {foreach $v2.child as $v3}
                            <tr class="success list_group_{$v.AdminMenuId}" style="display:none">
                                <td style="width:50px"></td>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                <td class="col-xs-2"><input type="text" class="form-control menu_name" placeholder="菜单名称" value="{$v3.Name}"></td>
                                <td class="col-xs-2"><input type="text" class="form-control menu_key" placeholder="菜单KEY"  value="{$v3.Key}"></td>
                                <td class="col-xs-2"><input type="text" class="form-control menu_url" placeholder="URL"  value="{$v3.Url}"></td>
                                <td class="col-xs-4">
                                    <div class="col-xs-6">
                                        <select class="form-control col-xs-2" onchange="changeMenu(this);">
                                            {$onemenu}
                                        </select>
                                    </div>
                                    <div class="col-xs-6">
                                        <select class="form-control col-xs-2 menu_parent">
                                            <option value="0">主菜单</option>
                                        </select>
                                    </div>
                                </td>
                                <td class="col-xs-1"><input type="text" class="form-control menu_order" placeholder="排序"  value="{$v3.DisplayOrder}"></td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="..." style="width:100px">
                                        <button class="btn btn-default update_menu" mid="{$v3.AdminMenuId}">保存</button>
                                        <a class="btn btn-danger delete" href="?do=delmenu&id={$v3.AdminMenuId}">删除</a>
                                    </div>
                                </td>
                                <input type="hidden" class="menu_one" value="{$v2.ParentId}">
                                <input type="hidden" class="menu_two" value="{$v3.ParentId}">
                            </tr>
                        {/foreach}
                    {/foreach}
                {/foreach}
            </tbody>
        </table>

    </div>

    <script type="text/javascript">
        var menu = {$twomenu};

        {literal}
        //菜单列表位置选项框初始化
        $("#list tr").each(function(){
            var one = $(this).find(".menu_one").val();
            var two = $(this).find(".menu_two").val();
            $(this).find("select:first").val(one);
            $(this).find("select:last").html(menu[one]).val(two);
        });

        //菜单位置选项联动
        function changeMenu(obj){
            var id = $(obj).val();
            $(obj).parent().next().find(".menu_parent").html(menu[id]);
        }

        //展开/隐藏列表
        $(".toggle-list").click(function(){
            $(".list_group_"+$(this).attr("mid")).toggle();
            if ($(this).text() == '+'){
                $(this).text("-");
            }else{
                $(this).text("+");
            }
        });


        //添加菜单
        $("#add_menu").click(function(){
            var name = $("#menu_name").val();
            var key = $("#menu_key").val();
            var url = $("#menu_url").val();
            var parent = $("#menu_parent").val();
            var order = $("#menu_order").val();
            if (name == '' || key == '' || parent == ''){
                top.swal('出错了', '请将信息填写完整', 'error');
            }else{
                $.ajax({
                    url:'menu.php?do=addmenu',
                    type:"post",
                    data:{name:name,key:key,url:url,parent:parent,order:order},
                    dataType:'json',
                    success:function(re){
                        top.swal(re);
                        if(re.type == 'success'){
                            self.location.reload();
                        }
                    }
                })
            }
            
        });

        //更新菜单
        $(".update_menu").click(function(){
            var obj = $(this).parent().parent().parent();
            var name = obj.find(".menu_name").val();
            var key = obj.find(".menu_key").val();
            var url = obj.find(".menu_url").val();
            var parent = obj.find(".menu_parent").val();
            var order = obj.find(".menu_order").val();
            var id = $(this).attr("mid");
            if (name == '' || key == '' || parent == ''){
                top.swal('出错了', '请将信息填写完整','','error');
            }else{
                $.ajax({
                    url:'menu.php?do=addmenu',
                    type:"post",
                    data:{name:name,key:key,url:url,parent:parent,order:order,id:id},
                    dataType:'json',
                    success:function(re){
                        top.swal(re);
                        if(re.type == 'success'){
                            self.location.reload();
                        }
                    }
                })
            }
            
        });

        //删除
        $(".delete").click(function(){
            var url = self.location.pathname + $(this).attr("href");
            top.__confirm('确定要删除吗？','删除后不可恢复！', url, self);
            return false;
        })

        {/literal}
    </script>
</body>
<html>
    